<script>
import {RouterView, RouterLink} from "vue-router";

export default {
  data() {
    return {
      activeMenu: '1',
      isCollapse: false,
      nick: '',
      menusMap: {

      },
      menus: [
        {
          name: "信息纵览",
          id: '1',
          path: '/index/scan',
          children: []
        }
      ]
    }
  },
  mounted() {
    const loginUser = this.$loginSession();
    this.menus = loginUser.menus
    this.activeMenu = JSON.stringify(this.menus[0])
    this.nick = loginUser.nick
  },
  methods: {
    logout: function () {
      let loginInfo = localStorage.getItem('login');
      loginInfo = JSON.parse(loginInfo);
      loginInfo.password = null
      localStorage.setItem('login', JSON.stringify(loginInfo))
      this.$router.push({path:'/'})
    },
    hideMenus() {
      this.isCollapse = !this.isCollapse;
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    selectItem(key) {
      if (!key) {
        return
      }
      const path = JSON.parse(key).path;
      if (!path || path === 'null' ) {
        return;
      }
      const cur = this.$root._router.currentRoute.path;
      if (cur !== path) {
        this.$router.push({path:path})
      }
    }
  },
  components: {
    RouterView,
    RouterLink
  }
}
</script>

<template>
  <div style="height: 100%;" id="main-menu-list">
    <el-container style="height: 100%;">
      <el-container>
        <el-aside :width="isCollapse?'50px':'200px'">
          <el-footer height="200px">
            <img alt="加载中" src="http://14.116.254.180:9999/static/img/logo1.1d3da6da.png" width="80%" style="margin-top: 10%">
          </el-footer>
          <el-menu
              text-color="rgb(191, 203, 217)"
              background-color="rgb(13, 18, 49)"
              v-bind:default-active="activeMenu"
              @open="handleOpen"
              @close="handleClose"
              unique-opened
              @select="selectItem"
              :collapse="isCollapse" style="border: 0;">
            <template v-for="item in menus">
              <template v-if="item.children && item.children.length > 0">
                <el-submenu v-bind:index="JSON.stringify(item)" v-bind:key="item.id" >
                  <template slot="title">
                    <i :class="item.icon"></i><span>{{ item.name }}</span>
                  </template>
                  <el-menu-item-group>
                    <el-menu-item v-for="item2 in item.children" :key="item2.id" :index="JSON.stringify(item2)">
                      <i :class="item.icon"></i>{{ item2.name }}
                    </el-menu-item>
                  </el-menu-item-group>
                </el-submenu>
              </template>
              <template v-else>
                <el-menu-item :key="item.id" v-bind:index="JSON.stringify(item)" route="a">
                  <template v-if="!isCollapse">
                    <i :class="item.icon"></i>{{ item.name }}
                  </template>
                </el-menu-item>
              </template>
            </template>
          </el-menu>
        </el-aside>
        <el-container>
          <el-header height="60px">
            <el-row>
              <el-col :span="12" align="left" style="line-height: 60px;vertical-align: center;">
                <i v-on:click="hideMenus" style="cursor: pointer;font-size: 30px;line-height: 60px;" :class="isCollapse ? 'el-icon-s-unfold':'el-icon-s-fold'"></i>
              </el-col>
              <el-col :span="12" align="right">
                <el-badge :value="3" class="item" style="font-size: 20px;float: right;line-height: 61px;vertical-align: center;"><i class="el-icon-warning-outline"/></el-badge>
                <el-menu class="el-menu-demo" mode="horizontal" style="width: 200px;float: right;">
                  <el-submenu index="1">
                    <template slot="title">
                      <i class="el-icon-user-solid"></i>{{ nick }}
                    </template>
                    <el-menu-item index="1-1"><RouterLink :to="{path:'/fullscreen'}">大屏</RouterLink></el-menu-item>
                    <el-menu-item index="1-2" v-on:click="logout">退出</el-menu-item>
                  </el-submenu>
                </el-menu>
              </el-col>
            </el-row>
          </el-header>
          <el-main>
            <RouterView/>
          </el-main>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<style scoped>
.el-header, .el-footer {
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: rgb(13, 18, 49);
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #E9EEF3;
  color: #333;
  text-align: center;
  line-height: 160px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

#main-menu-list ul.el-menu>li{
  text-align: left;
}

#main-menu-list .el-submenu__icon-arrow {
  margin-left: 20px;
  right: auto;
}


#main-menu-list ul.el-menu>li>ul>li{
  margin-left: 5px;
}
</style>
